﻿@page "/modals"
@inject IStringLocalizer<Modals> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Normal">
    <div class="modal d-block position-relative" style="z-index: 2;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@Localizer["P3"]</h5>
                    <button type="button" class="btn-close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>@Localizer["P4"]</p>
                </div>
                <div class="modal-footer">
                    <Button Color="Color.Secondary" Text="Close" Icon="fa-solid fa-xmark"></Button>
                    <Button Text="Save" Icon="fa-solid fa-floppy-disk"></Button>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3">
        <p>@((MarkupString)Localizer["P5"].Value)</p>
        <Button OnClick="() => Modal.Toggle()">@Localizer["P9"]</Button>
        <Button OnClick="OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
    <Modal @ref="Modal" IsKeyboard="@IsKeyboard">
        <ModalDialog Title="@Localizer["P10"]">
            <BodyTemplate>
                <div>@Localizer["P11"]</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="@Localizer["P12"]" Introduction="@Localizer["P13"]" Name="IsBackdrop">
    <Button OnClick="() => BackdropModal.Toggle()">@Localizer["P14"]</Button>
    <Modal @ref="BackdropModal" IsBackdrop="true">
        <ModalDialog Title="@Localizer["P15"]">
            <BodyTemplate>
                <div>@Localizer["P16"]</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="@Localizer["P17"]" Introduction="@Localizer["P18"]" Name="DialogSize">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => SmailModal.Toggle()">@Localizer["P19"]</Button>
            <Modal @ref="SmailModal">
                <ModalDialog Size="Size.Small" Title="@Localizer["P20"]">
                    <BodyTemplate>
                        <div>@Localizer["P21"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => LargeModal.Toggle()">@Localizer["P22"]</Button>
            <Modal @ref="LargeModal">
                <ModalDialog Size="Size.Large" Title="@Localizer["P23"]">
                    <BodyTemplate>
                        <div>@Localizer["P24"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraLargeModal.Toggle()">@Localizer["P25"]</Button>
            <Modal @ref="ExtraLargeModal">
                <ModalDialog Size="Size.ExtraLarge" Title="@Localizer["P26"]">
                    <BodyTemplate>
                        <div>@Localizer["P27"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraExtraLargeModal.Toggle()">@Localizer["P28"]</Button>
            <Modal @ref="ExtraExtraLargeModal">
                <ModalDialog Size="Size.ExtraExtraLarge" Title="@Localizer["P29"]">
                    <BodyTemplate>
                        <div>@Localizer["P30"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P31"]" Introduction="@Localizer["P32"]" Name="FullScreenSize">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => SmailFullScreenModal.Toggle()">@Localizer["P33"]</Button>
            <Modal @ref="SmailFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.Always" Title="@Localizer["P34"]">
                    <BodyTemplate>
                        <div>@Localizer["P35"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => LargeFullScreenModal.Toggle()">@Localizer["P36"]</Button>
            <Modal @ref="LargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.Large" Title="@Localizer["P37"]">
                    <BodyTemplate>
                        <div>@Localizer["P38"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraLargeFullScreenModal.Toggle()">@Localizer["P39"]</Button>
            <Modal @ref="ExtraLargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.ExtraLarge" Title="@Localizer["P40"]">
                    <BodyTemplate>
                        <div>@Localizer["P41"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ExtraExtraLargeFullScreenModal.Toggle()">@Localizer["P42"]</Button>
            <Modal @ref="ExtraExtraLargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.ExtraExtraLarge" Title="@Localizer["P43"]">
                    <BodyTemplate>
                        <div>@Localizer["P44"]</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P45"]" Introduction="@Localizer["P46"]" Name="CenterVertically">
    <Button OnClick="() => CenterModal.Toggle()">@Localizer["P47"]</Button>
    <Modal @ref="CenterModal">
        <ModalDialog IsCentered="true" Title="@Localizer["P48"]">
            <BodyTemplate>
                <div>@Localizer["P49"]</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="@Localizer["P50"]" Introduction="@Localizer["P51"]" Name="LongContent">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => LongContentModal.Toggle()">@Localizer["P52"]</Button>
            <Modal @ref="LongContentModal">
                <ModalDialog IsCentered="true" Title="@Localizer["P53"]">
                    <BodyTemplate>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="() => ScrollModal.Toggle()">@Localizer["P54"]</Button>
            <Modal @ref="ScrollModal">
                <ModalDialog IsCentered="true" IsScrolling="true" Title="@Localizer["P55"]">
                    <BodyTemplate>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P56"]" Introduction="@Localizer["P57"]" Name="IsDraggable">
    <Button OnClick="() => DragModal.Toggle()">@Localizer["P58"]</Button>
    <Modal @ref="DragModal">
        <ModalDialog Title="@Localizer["P59"]" IsDraggable="true" ShowMaximizeButton="true">
            <BodyTemplate>
                <div>@Localizer["P60"]</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="@Localizer["P61"]" Introduction="@Localizer["P62"]" Name="Maximize">
    <Button OnClick="() => MaximizeModal.Toggle()">@Localizer["P63"]</Button>
    <Modal @ref="MaximizeModal">
        <ModalDialog Title="@Localizer["P64"]" ShowMaximizeButton="true">
            <BodyTemplate>
                <div>@Localizer["P65"]</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="弹窗已显示回调方法" Introduction="通过设置 <code>ShownCallbackAsync</code> 回调委托，弹窗显示后回调此方法" Name="ShownCallbackAsync">
    <Button OnClick="() => ShownCallbackModal.Toggle()">弹窗</Button>
    <Modal @ref="ShownCallbackModal" OnShownAsync="OnShownCallbackAsync">
        <ModalDialog Title="ShownCallbackAsync 回调示例">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
